html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    color: #FFF;
    box-sizing: border-box;
}

.screen {
    width: 1920px;
    height: 1080px;
    background: url(../img/bg.png) no-repeat center / 100%;
    position: relative;
    left: 50%;
    top: 50%;
    transform-origin: 0 0;
    transform: translate(-50%, -50%);
}

.screen-menu {
  position: absolute;
  right: 25px;
  color:#FFF;
  font-size: 16px;
  top: 28px;
}

.title-left {
    position: absolute;
    top: 28px;
    font-size: 16px;
    left: 25px;
}

.menu-item {
    margin-right: 10px;
    cursor: pointer;
    opacity: .8;
}
.menu-item:active, .menu-item.active {
    opacity: 1;
}

.header {
    height: 80px;
    position: relative;
    background: url(../img/header-bg.png) no-repeat center / 100%;
}

.header img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 18px;
}

.main {
    position: absolute;
    top: 100px;
    bottom: 20px;
    left: 25px;
    right: 25px;
}
.main > section {
    z-index: 3;
}
.flex-w {
    flex-wrap: wrap;
}

.flex-betw {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-c {
    display: flex;
    align-items: center;
}

.flex-v {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flex-vc {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flex-vr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.flex1 {
    flex: 1;
}

.left {
    position: absolute;
    width: 26%;
    height: 100%;
}

.left > section, .right > section {
    position: relative;
}

.left-top {
    height: 51%;
}

.left-middle {
    height: 24%;
}

.left-bottom {
    height: 20%;
}

.right {
    position: absolute;
    width: 26%;
    height: 100%;
    right: 0;
}

.right-top {
    height: 13%;
}

.right-middle1 {
    height: 32%;
}

.right-middle2 {
    height: 26%;
}

.right-bottom {
    height: 27%;
}

.block {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /*border: 1px solid #Fcc;*/
    display: flex;
    flex-direction: column;
}

.block-title {
    padding-left: 24px;
    height: 44px;
    line-height: 44px;
    position: relative;
    font-size: 19px;
}

.detail-btn {
    height: 22px;
    line-height: 22px;
    padding: 0 10px;
    font-size: 13px;
    background-color: #186484;
    border: 1px solid #2099c5;
    /*cursor: pointer;*/
}

.block-title:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 18px;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    background: url("../img/title-icon.png") no-repeat center / 100%;
}

.block-title:after {
    content: "";
    position: absolute;
    height: 3px;
    left: 0px;
    right: 0;
    bottom: 0;
    background: url("../img/title-line.png") no-repeat center / 100%;
}

.block-content {
    position: relative;
    padding-top: 10px;
    flex: 1;
}

.pie {
    height: 55%;
    /* height: 100%; */
}

.pie-title {
    width: 100%;
    height: 32px;
    background: url("../img/pie-title.png") no-repeat center left;
    background-size: contain;
    font-size: 16px;
    padding-left: 34px;
    line-height: 32px;
}

.pie-title-value {
    padding-left: 16px;
    letter-spacing: 1px;
    font-weight: bold;
}

.pie-title-value .unit {
    font-size: 12px;
}

.bar {
    height: 42%;
}

.item1, .item2 {
    width: 33.3%;
    font-size: 13px;
    /* text-align: center; */
}
.item1{
    text-align: center;
}

.item1__num {
    font-size: 18px;
    font-weight: bold;
    color: #24dcf7;
}

.item1__label {
    color: #f3fffe;
}

.item1__label i {
    color: #1cf0bc;
    margin-right: 5px;
}

.split-line {
    height: 1px;
    width: 100%;
    background: url("../img/blue-split.png") no-repeat center / 100%;
}
.item2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 120px;
    height: 63px;
    padding-left: 15px;
    margin-bottom: 5px;
    background: url("../img/left-bottom-box.png") no-repeat center / 100%;
}

.item2__num {
    font-size: 18px;
    font-weight: bold;
    color: #ffa951;
}

.item2__label {
    color: #a7d5f9;
}

.item3 {
    width: 25%;
}

.item3 {
    width: 101px;
    height: 62px;
    font-size: 13px;
    color: white;
    padding-left: 10px;
    background: url("../img/right-top-box.png") no-repeat center / 100%;
}

.item3:not(:last-of-type) {
    margin-right: 10px;
}

.item3__label {
    color: #a7d5f9;
}

.item3__num {
    font-size: 18px;
    font-weight: bold;
}

.dialog {
    display: none;
    width: 1306px;
    height: 689px;
    position: absolute;
    z-index: 99;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url("../img/dialog.png") no-repeat center / 100%;
}

.dialog-mask {
    position: fixed;
    z-index: 98;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0, .7);
    display: none;
}

.dialog-head {
    height: 44px;
    line-height: 44px;
    margin-top: 15px;
    margin-left: 30px;
    font-size: 20px;
    background-image: -webkit-linear-gradient(bottom, #FFF, #b8dcfe, #8cc1f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.dialog-close {
    position: absolute;
    width: 36px;
    height: 36px;
    right: 20px;
    top: 23px;
    cursor: pointer;
    background: url("../img/close.png") no-repeat center / 100%;

}

.dialog-close:hover, .dialog-close:active {
    opacity: .7;
}

.dialog-content {
    position: absolute;
    bottom: 21px;
    left: 46px;
    right: 36px;
    top: 81px;
    display: flex;
    justify-content: space-between;
}

.chart-item {
    width: 30%;
}

.p-bg {
    width: 85px;
    height: 6px;
    margin: 0 10px;
    background-color: #48557b;
}

.p-con {
    height: 100%;
}

.p-per {
    color: #3ff3ed;
}

.first, .second, .third, .otherRank {
    width: 100%;
    height: 33px;
    font-size: 13px;
    margin-bottom: 5px;
}

.otherRank:last-of-type {
    margin-bottom: 0;
}

.orgName {
    color: #3ff3ed;
    margin-left: 5px;
}

.first {
    background: url("../img/first-box.png") no-repeat center / 100%;
}

.second {
    background: url("../img/second-box.png") no-repeat center / 100%;
}

.third {
    background: url("../img/third-box.png") no-repeat center / 100%;
}

.otherRank {
    background: url("../img/rank-box.png") no-repeat center / 100%;
}

.first-icon, .second-icon, .third-icon, .otherRank-icon {
    width: 20px;
    height: 20px;
}

.first-icon {
    background: url("../img/first.png") no-repeat center / 100%;
}

.second-icon {
    background: url("../img/second.png") no-repeat center / 100%;
}

.third-icon {
    background: url("../img/third.png") no-repeat center / 100%;
}

.icon-text {
    width: 30%;
    margin-left: 10px;
}

.arrow-up, .arrow-down {
    width: 12px;
    height: 16px;
    margin-right: 30px;
}

.arrow-down {
    background: url("../img/arrow-down.png") no-repeat center / 100%;
}

.arrow-up {
    background: url("../img/arrow-up.png") no-repeat center / 100%;
}

table {
    font-size: 13px;
    border-collapse: collapse;
    width: 100%;
}

.table-header {
    color: #3ff3ed;
    height: 26px;
    line-height: 26px;
    background-color: #084994;
}

.table-tr {
    height: 32px;
    line-height: 32px;
    border-bottom: 2px solid #3b4d7d;
}

.table-header > td:nth-child(1), .table-tr > td:nth-child(1) {
    padding-left: 10px;
}

.table-header > td:nth-child(4), .table-tr > td:nth-child(4) {
    text-align: right;
    padding-right: 20px;
}

.middle {
    position: absolute;
    width: 42%;
    height: 87%;
    left: 50%;
    top: 0;
    transform: translate(-50%);
    /*background: url("../img/middle.png") no-repeat center / 100%;*/
}

.middle > .block {
    align-items: center;
}

.middle-left {
    position: absolute;
    left: 0%;
    top: 32px;
    display: none;
}

.middle-right {
    position: absolute;
    right: 0%;
    top: 32px;
}

.m-label {
    font-size: 18px;
}

.number-large {
    font-size: 30px;
}

.middle-left .m-label, .middle-left .number-large {
    margin-left: 22px;
}

.middle-right .m-label {
    margin-left: 8px;
}

.middle-right .number-else {
    margin-right: 15px;
}

.p-total, .t-new, .l-company, .c-company {
    margin-bottom: 25px;
}

.p-total__label, .t-new__label, .r-total__label, .l-company__label, .c-company__label, .m-new__label {
    margin-bottom: 15px;
}

.p-total__label {
    width: 103px;
    height: 28px;
    line-height: 28px;
    background: url('../img/blue-left.png') no-repeat center / 100%
}

.p-total__end {
    width: 124px;
    height: 15px;
    background: url('../img/blue-split-left.png') no-repeat center / 100%
}

.t-new__label {
    width: 103px;
    height: 28px;
    line-height: 28px;
    background: url('../img/yellow-left.png') no-repeat center / 100%
}

.t-new__end {
    width: 125px;
    height: 15px;
    background: url('../img/yellow-split-left.png') no-repeat center / 100%
}

.r-total__label {
    width: 103px;
    height: 28px;
    line-height: 28px;
    background: url('../img/red-left.png') no-repeat center / 100%
}

.r-total__end {
    width: 146px;
    height: 15px;
    background: url('../img/red-split-long.png') no-repeat center / 100%
}

.l-company__label {
    width: 102px;
    height: 28px;
    line-height: 28px;
    background: url('../img/blue-right.png') no-repeat center / 100%
}

.l-company__end {
    width: 126px;
    height: 15px;
    background: url('../img/blue-split-right.png') no-repeat center / 100%
}

.c-company__label {
    width: 102px;
    height: 28px;
    line-height: 28px;
    background: url('../img/yellow-right.png') no-repeat center / 100%
}

.c-company__end {
    width: 77px;
    height: 15px;
    background: url('../img/yellow-split-right.png') no-repeat center / 100%
}

.m-new__label {
    width: 102px;
    height: 28px;
    line-height: 28px;
    background: url('../img/red-right.png') no-repeat center / 100%
}

.m-new__end {
    width: 53px;
    height: 15px;
    background: url('../img/red-split-short.png') no-repeat center / 100%
}

.year-sel {
    height: 38px;
    line-height: 38px;
    margin-bottom: 28px;
    display: none;
}

.card-left{
    position: absolute;
    top: 0;
    left: 0;
}
.card-left > div {
    float: left;
    margin-right: 10px;
}
.card-left .m-label {
    padding-left: 22px;
}

.card-right {
    position:absolute;
    top: 0;
    right: 0;
}
.card-right > div {
    float: left;
    margin-left: 10px;
}
.card-right .m-label {
    padding-left: 7px;
}

.sel-btn {
    font-size: 22px;
    color: #e2ebf1;
    padding: 8px 15px;
    background-color: #0c366a;
    border: 1px solid #2099c5;
    cursor: pointer;
    opacity: 0.3;
}

.sel-btn:not(:last-of-type) {
    margin-right: 10px;
}

.sel-btn.active {
    opacity: 1;
}
.sel-btn:active {
    opacity: .7;
}
.map {
    width: 680px;
    height: 695px;
    background: url("../img/map.png") no-repeat center / 100%;
}

.bottom {
    width: 1630px;
    height: 259px;
    left: 145px;
    position: absolute;
    bottom: -20px;
    background: url("../img/bottom-bg.png") no-repeat center / 100%;
    background-position: bottom center;
    z-index: 2 !important;
}

.bottom-bg {
    position: relative;
    
}

.bottom-con {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0%);
    width: 1044px;
    height: 141px;
    background: url("../img/bottom.png") no-repeat center / 100%;
}

.small-light-blue {
    font-size: 10px;
    color: #00f0ff;
}

.btn-menu {
    font-size: 20px;
    color: #00f0ff;
}

.bottom-mid {
    position: absolute;
    left: 50%;
    transform: translateX(-30%);
    top: 50px;
}
.bottom-mid__text{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.arrow-left{
    position: absolute;
    right: 76px;
    bottom: 10px;
    width: 14px;
    height: 25px;
    background: url("../img/bottom-left-arrow2.png") no-repeat center / 100%;
}
.arrow-right{
    position: absolute;
    right: -22px;
    bottom: 10px;
    width: 14px;
    height: 25px;
    background: url("../img/bottom-right-arrow2.png") no-repeat center / 100%;
}
.bottom-l {
    position: absolute;
    left: 100px;
    top: 95px;
    width: 25%;
    display: flex;
    justify-content: space-between;
}

.bottom-r {
    position: absolute;
    right: 115px;
    top: 95px;
    width: 25%;
    display: flex;
    justify-content: space-between;
}

.btn-menu:hover, .detail-btn:hover, .btn-menu:active, .detail-btn:active{
    cursor: pointer;
    opacity: 0.8;
}
.btn-menu,.detail-btn{
    z-index: 66;
}

.bars {
    height: 70px;
    position: absolute;
    width: 40%;
    background: #0050b09e;
    top: 79%;
    transform: translateX(-50%);
    left: 50%;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.bar-item {
    flex: 1 1 auto;
    color: #FFF;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}
.bar-item:hover {
    background-color: rgba(255, 255, 255, .2);
}
.bar-item-num {
    color: #FFA951;
    font-size: 22px;
    font-weight: bold;
}
.bar-item-bottom {
    font-size: 12px;
}